import DGFadeView from "../components/DGFadeView.tsx";
import {Box, Button, useTheme} from "@mui/material";
import DGTextView from "../components/DGTextView.tsx";
import {useLocation, useNavigate} from "react-router-dom";
import {useEffect} from "react";
import AppProvider from "../sources/AppProvider.ts";

function ErrorView() {
    // 全局上下文
    const App = AppProvider.useAppContext();
    // 查询模式
    const m = useTheme().palette.mode === "light";
    // 路由地址
    const location = useLocation();
    // 路由跳转
    const router = useNavigate();
    // 判断地址
    const handleClick = (id: number) => {
        // 返回首页
        if (id === 0) {
            // 解析地址
            const routerPath = location.pathname.split("/");
            // 判断是否访问节点
            if (routerPath.length > 2) return router("/" + routerPath[1], {replace: true});
            // 直接访问首页
            router("/", {replace: true});
        } else router(-1);
    }

    useEffect(() => {
        if (App) App.setTitle("找不到页面");
    }, [App]);


    return (<DGFadeView time={1000} load autoLoad style={{backgroundColor: m ? "#EDEDED" : "#2D2D2D"}}>
        <Box style={{padding: "20% 5%", display: "flex", flexDirection: "column", alignItems: "center",}}>
            <DGTextView variant="h3" Title Bold> 404 </DGTextView>
            <br/><br/>
            <DGTextView Title Bold>很抱歉，您访问的页面不存在</DGTextView>
            <DGTextView Title Bold>Sorry, The page does not exist</DGTextView>
            <br/><br/>
            <Box
                style={{margin: "20px 0", display: "flex", flexDirection: "column", gap: "30px"}}>
                <Button onClick={() => handleClick(0)}>返回首页</Button>
                <Button onClick={() => handleClick(1)}>返回上一页</Button>
            </Box>
        </Box>
    </DGFadeView>);
}

export default ErrorView;